<template>
	<view class="haderbb" :style="{'background':back1}">
		<image :src="img" mode="" class="haderbbimg"></image>
		<view class="header" :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}">
			<image
				:src="str1=='oridei'?'http://luying.hacuu.com/static/Frame@2x(28).png':'http://luying.hacuu.com/static/微信图片_20250427102430.png'"
				mode="" class="header_back" v-if="pagetype!='home'" @click="back"></image>

			<view class="header_title" :style="{'color':str1=='oridei'?'#000':''}">
				{{title}}
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: ['title', 'back1', 'str1', 'pagetype', 'typestr'],
		data() {
			return {
				barHeight: 0,
				statusBarHeight: 0
			}
		},
		mounted() {
			console.log('mounted');
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		},

	}
</script>

<style lang="scss" scoped>
	.readuce {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.14);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		border-radius: 50%;
		margin-left: 29rpx;

		.readuceimg {
			width: 32rpx;
			height: 32rpx;

		}
	}

	.haderbb {
		width: 100%;
		overflow: hidden;
		position: fixed;
		z-index: 999;
		transition: 1s;
	}

	.haderbbimg {
		width: 100%;
		z-index: -2;
		position: absolute;
	}

	.header {
		width: 100%;
		height: var(--status-bar-height);
		// height: 64rpx;
		// overflow: hidden;
		// margin-top: 100rpx;
		margin-bottom: 14rpx;
		display: flex;
		align-items: center;
		position: relative;

		&_back {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			margin-left: 29rpx;
		}

		&_title {
			font-family: PingFang SC-Bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.header_title {
		width: 100%;
		text-align: center;
	}
</style>